<!DOCTYPE html>
<html data-th-replace="~{admin/layout :: layout(~{::head/content()}, ~{::body/ul}, ~{}, ~{::body/form})}">
<head>
    <title data-th-inline="text">Admin | Team | Edit [[${profile.fullName}]]</title>
</head>
<body>

<ul>
    <li><a data-th-href="@{/admin}">Admin</a></li>
    <li><a data-th-href="@{/admin/team}">Team</a></li>
    <li class="is-active"><a data-th-href="@{'/admin/team/' + ${profile.username}}" aria-current="page"
           data-th-text="${profile.username}">username</a></li>
</ul>

<form data-th-action="@{${formAction}}" action="#" method="post" data-th-object="${profile}">
    <h3 class="title is-3">Informations</h3>
    <div class="columns">
        <div class="column is-half">
            <div class="field">
                <label class="label">Name</label>
                <div class="control">
                    <input class="input" data-th-classappend="(${#fields.hasErrors('name')}? ' is-danger')"
                           type="text" data-th-field="*{name}" name="name" placeholder="Name">
                    <p class="help is-danger" data-th-if="${#fields.hasErrors('name')}" data-th-errors="*{name}">Incorrect
                        name</p>
                </div>
            </div>
            <div class="field">
                <label class="label">Job Title</label>
                <div class="control">
                    <input class="input" data-th-classappend="(${#fields.hasErrors('jobTitle')}? ' is-danger')"
                           type="text" data-th-field="*{jobTitle}" name="jobTitle"
                           placeholder="Your role on the Spring team">
                    <p class="help is-danger" data-th-if="${#fields.hasErrors('jobTitle')}" data-th-errors="*{name}">Incorrect
                        job title</p>
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <label class="checkbox"><input class="checkbox" type="checkbox" data-th-field="*{hidden}"
                                                   name="hidden"> Alumni</label>
                    <p>Switch on this flag to indicate someone has left the Spring team</p>
                </div>
            </div>
        </div>
        <div class="column is-half">
            <div class="field">
                <label class="label">Location</label>
                <div class="control">
                    <input class="input" data-th-classappend="(${#fields.hasErrors('location')}? ' is-danger')"
                           type="text" data-th-field="*{location}" name="location">
                    <p class="help is-danger" data-th-if="${#fields.hasErrors('location')}" data-th-errors="*{location}">
                        Incorrect location</p>
                </div>
            </div>
            <div class="field">
                <label class="label">Geolocation</label>
                <div class="control">
                    <input class="input" data-th-classappend="(${#fields.hasErrors('geoLocation')}? ' is-danger')"
                           type="text" data-th-field="*{geoLocation}" name="geoLocation"
                           placeholder="e.g. 34.021944,-118.481389">
                    <p class="help is-danger" data-th-if="${#fields.hasErrors('geoLocation')}"
                       data-th-errors="*{geoLocation}">Incorrect geoLocation</p>
                </div>
            </div>
        </div>
    </div>

    <hr class="hr">
    <h3 class="title is-3">Social</h3>

    <div class="columns">
        <div class="column is-half">
            <div class="field">
                <label class="label">Gravatar Email</label>
                <div class="control">
                    <input class="input"
                           data-th-classappend="(${#fields.hasErrors('gravatarEmail')}? ' is-danger')"
                           type="text" data-th-field="*{gravatarEmail}" name="gravatarEmail"
                           placeholder="emily@pivotal.io">
                    <p>Your user avatar throughout the site.</p>
                    <p class="help is-danger" data-th-if="${#fields.hasErrors('gravatarEmail')}"
                       data-th-errors="*{gravatarEmail}">Incorrect Gravatar email.</p>
                </div>
            </div>
            <div class="field">
                <img data-th-src="*{avatarUrl}" width="300"/>
                <p>
                    <a href="http://gravatar.com">Sign up</a> for a Gravatar account or
                    <a href="https://gravatar.com/emails/">edit your Gravatar settings</a>
                </p>
            </div>

        </div>
        <div class="column is-half">
            <div class="field">
                <label class="label">Speakerdeck</label>
                <div class="control">
                    <input class="input"
                           data-th-classappend="(${#fields.hasErrors('speakerdeckUsername')}? ' is-danger')"
                           type="text" data-th-field="*{speakerdeckUsername}" name="speakerdeckUsername"
                           placeholder="username">
                    <p class="help is-danger" data-th-if="${#fields.hasErrors('speakerdeckUsername')}"
                       data-th-errors="*{speakerdeckUsername}">Incorrect Speakerdeck username</p>
                </div>
            </div>
            <div class="field">
                <label class="label">Twitter</label>
                <div class="control">
                    <input class="input" data-th-classappend="(${#fields.hasErrors('twitterUsername')}? ' is-danger')"
                           type="text" data-th-field="*{twitterUsername}" name="twitterUsername" placeholder="username">
                    <p class="help is-danger" data-th-if="${#fields.hasErrors('twitterUsername')}"
                       data-th-errors="*{twitterUsername}">Incorrect Twitter username</p>
                </div>
            </div>
            <div class="field">
                <label class="label">Lanyrd</label>
                <div class="control">
                    <input class="input" data-th-classappend="(${#fields.hasErrors('lanyrdUsername')}? ' is-danger')"
                           type="text" data-th-field="*{lanyrdUsername}" name="lanyrdUsername" placeholder="username">
                    <p class="help is-danger" data-th-if="${#fields.hasErrors('lanyrdUsername')}"
                       data-th-errors="*{lanyrdUsername}">Incorrect Lanyrd username</p>
                </div>
            </div>
        </div>
    </div>
    <h2 class="title">More!</h2>
    <div class="field">
        <label class="label">Short Bio</label>
        <div class="control">
                    <textarea class="textarea"
                              data-th-classappend="(${#fields.hasErrors('bio')}? ' is-danger')"
                              placeholder="Tell us a bit about yourself!"
                              data-th-field="*{bio}" name="bio" rows="5"></textarea>
            <p class="help is-danger" data-th-if="${#fields.hasErrors('bio')}" data-th-errors="*{bio}">
                Incorrect Bio</p>
        </div>
        <p>500 chars or less, no markup supported.</p>
    </div>
    <div class="buttons control is-centered">
        <button type="submit" class="button is-primary">Save</button>
        <a class="button" data-th-href="@{/admin/team}">Cancel</a>
    </div>
</form>
</body>
</html>
